<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Meatball</title>
    <!-- ICON -->
    <link href="/meatball/images/meatball.ico" type="image/ico" rel="shortcut icon">
    <!-- CSS -->
    <link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
</head>
<body>
<div class="layui-fluid" style="margin-top: 10px">
    <div class="layui-row">
        <div class="layui-md12">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <form class="layui-form" style="float: left;">
                        <!--<button class="layui-btn layui-btn-warm" lay-submit lay-filter="addBtn" title="新增">
                            <i class="layui-icon">&#xe61f;</i> 新增
                        </button>-->
                    </form>
                </div>
                <div class="layui-col-md11">
                    <form class="layui-form" id="queryForm" style="float: right;">
                        <div class="layui-inline">
                            <input type="text" name="subject" title="名称" placeholder="请输入订单名称" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="orderSource" title="订单来源" placeholder="请输入订单来源" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <select name="orderStatus" title="支付状态">
                                <option value="-1"l>请选择支付状态</option>
                                <option value="0">待支付</option>
                                <option value="1">已支付</option>
                                <option value="2">已取消</option>
                                <option value="3">已退款</option>
                                <option value="4">已失效</option>
                                <option value="5">支付金额与订单金额不符</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="timeHorizon" title="日期范围" class="layui-input" id="date" placeholder="日期范围" autocomplete="off">
                        </div>
                        <button class="layui-btn" lay-submit lay-filter="query">
                            <i class="layui-icon">&#xe615;</i> 查询
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <!-- 表格 -->
            <table id="table" lay-filter="table"></table>
        </div>
    </div>
</div>
<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>
<!-- javascirpt -->
<script type="text/javascript" th:inline="none">
    layui.config({
        base: '/lib/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index'], function() {
        var table = layui.table,
            laydate = layui.laydate,
            $ = layui.jquery,
            form = layui.form,
            $queryForm = $('#queryForm'),
            layerIndex = 1;

        // 绘制表格
        table.render({
            elem: '#table',
            url: '/pay/trade/table',
            page: true, // 开始分页
            // cellMinWidth: 80, // 定义全局最小宽度
            request: {
                pageName: 'offset'
            },
            response: {
                statusCode: 200
            },
            cols: [[
                {type: 'numbers', title: '序号'},
                {field:'subject', title: '名称'},
                {field:'tradeNo', title: '流水号', sort: true},
                {field:'outTradeNo', title: '编号', sort: true},
                {field:'buyerId', title: '买家户号'},
                {field:'buyerLogonId', title: '买家账号'},
                {field:'totalAmountVo', title: '订单金额(元)'},
                {field:'receiptAmountVo', title: '实收金额(元)'},
                {field:'gmtCreateVo', title: '创建时间'},
                {field:'gmtPaymentVo', title: '付款时间'}
            ]]
        });

        // 查询用户
        form.on('submit(query)', function(data) {
            table.reload('table', {
                where: data.field
            });
            return false;
        })

        // 搜索条件提示
        $queryForm.find('input').on('mouseover', function() {
            if(typeof($(this).attr('title')) == 'undefined') return;
            layer.tips($(this).attr('title'), this, {tips: 1});
        });

        // 渲染日期
        laydate.render({
            elem: '#date'
            ,range: true
        });
    });
</script>
</body>
</html>